<template>
  <div class="app-container">
    <el-form :model="queryParam" ref="queryForm" :inline="true" v-loading="queryFormLoading">
      <el-form-item label="选择课程：" prop="courseId" required>
        <el-select v-model="queryParam.courseId" @change="getPaper" placeholder=" 请选择课程" clearable>
          <el-option v-for="item in courseList" :key="item.courseId" :label="item.courseName" :value="item.courseId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择试卷：" prop="examPaperId">
        <el-select v-model="queryParam.examPaperId" placeholder=" 请选择试卷" clearable>
          <el-option v-for="item in examPaperList" :key="item.examPaperId" :value="item.examPaperId" :label="item.examPaperName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">查询</el-button>
        <!--router-link :to="{path:'/class/student/edits'}" class="link-left">
         <el-button size="mini" type="primary" icon="el-icon-plus" >批量添加</el-button>
        </router-link-->
      </el-form-item>
    </el-form>

    <div class="table">
      
      <el-table v-show="statu" v-loading="listLoading" :data="tableData" style="width: 100%;height:100%:font-size:18px" >
        <el-table-column prop="stuName" label="姓名"  align="center"></el-table-column>
       

        <el-table-column prop="examRank" label="试卷排名"  align="center"></el-table-column>
        <el-table-column prop="grade" label="试卷分数" width="600" align="center"></el-table-column>
        
      </el-table>
    </div>
     <el-table v-show="pstatu" v-loading="paperlistLoading" :data="ptableData" style="width: 100%;height:100%:font-size:18px" >
        <el-table-column prop="stuName" label="姓名" width="300" align="center"></el-table-column>
       
       <el-table-column prop="examPaperName" label="试卷" width="300" align="center"></el-table-column>
        <el-table-column prop="examRank" label="试卷排名" width="180" align="center"></el-table-column>
        <el-table-column prop="grade" label="试卷分数" align="center"></el-table-column>
        
      </el-table>
       <el-table v-show="cstatu" v-loading="courselistLoading" :data="ctableData" style="width: 100%;height:100%:font-size:18px" >
        <el-table-column prop="stuName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="courseGradeRank" label="课程排名" align="center"></el-table-column>
        <el-table-column prop="courseGrade" label="总分数" width="600" align="center"></el-table-column>
        
      </el-table>
    <div class="pager">
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="10"></el-pagination>
    </div>
    
  </div>
</template>

<script>
// import { mapGetters, mapState } from 'vuex'
// import Pagination from '@/components/Pagination'
// import gradeApi from '@/api/grade'
// import studentApi from '@/api/student'
export default {
  components: { Pagination },
  data () {
    return {
      queryParam: {
        classId: null,
        courseId: null,
        courseName: null,
        examPaperName: null,
        examPaperId: null,
        courseGradeRank: null,
        courseGrade: null,
        pageSize: 10,
        pageIndex: 1
      },
      statu:false,
      pstatu:false,
      cstatu:false,
      localFavorites: [],
      listLoading: false,
      paperlistLoading: true,
      courselistLoading: false,
      queryFormLoading: false,
      tableData: [],
      ptableData: [],
      ctableData: [],
      total: 0
    }
  },
  created () {
    this.classId = this.$route.query.id;
    this.getCourse();
    this.search()
  },
  methods: {
    search () {
      this.courseId=this.queryParam.courseId;
      this.getPaper();
      this.examPaperId=this.queryParam.examPaperId;
      if(this.examPaperId==null||this.examPaperId=="")
      {
           if(this.courseId==null||this.courseId=="")
          {
            this.paperlistLoading = true
            this.pstatu= true,
            this.statu= false
            this.cstatu= false
            gradeApi.studenexamtList({classId: this.classId}).then(data => {
            this.ptableData = data.response
            this.paperlistLoading = false
            //this.pstatu= false
            })
          }
          else
          {

            this.courselistLoading = true
            this.cstatu= true,
            this.statu= false
            this.pstatu= false
            gradeApi.courseRank({ classId: this.classId,courseId: this.courseId}).then(data => {
            console.log(data)
            this.ctableData = data.response
            this.courselistLoading = false
          })
          }
      }
      else
      {
            this.listLoading = true
            this.statu= true,
            this.pstatu= false
            this.cstatu= false
            gradeApi.paperRank({ classId: this.classId,examPaperId: this.examPaperId}).then(data => {
            console.log(data)
            this.tableData = data.response
            this.listLoading = false
           
          })
      }
     
    },

     getCourse() {

      this.queryFormLoading=true;
      gradeApi.studentList({ classId: this.classId})
        .then(res => {
          this.queryFormLoading=false;
          if (res.code == 1) {
            this.courseList = res.response.courseContentList;
          }
        })
        .catch(res => {
          this.queryFormLoading=false;
        });
    },
        
    getPaper() {
      this.courseId=this.queryParam.courseId;
      this.queryFormLoading=true;
      gradeApi.studentList({ classId: this.classId})
        .then(res => {
          this.queryFormLoading=false;
          if (res.code == 1) {
            if(this.courseId==null||this.courseId=="")
            {
              this.examPaperList =null;
            }
            else
            {  
              res.response.courseContentList.map(item => {
              if(item.courseId==this.courseId)
                {this.examPaperList = item.examPaperList;}
              })

            }
          
          }
        })
        .catch(res => {
          this.queryFormLoading=false;
        });
    },
   
    submitForm () {
      this.queryParam.pageIndex = 1
      this.search()
    },
    levelFormatter  (row, column, cellValue, index) {
      return this.enumFormat(this.levelEnum, cellValue)
    },
    sexFormatter  (row, column, cellValue, index) {
      return this.enumFormat(this.sexEnum, cellValue)
    },
    statusFormatter (status) {
      return this.enumFormat(this.statusEnum, status)
    },
    statusTagFormatter (status) {
      return this.enumFormat(this.statusTag, status)
    },
    statusBtnFormatter (status) {
      return this.enumFormat(this.statusBtn, status)
    }
  },
  computed: {
    ...mapGetters('enumItem', [
      'enumFormat'
    ]),
    ...mapState('enumItem', {
      sexEnum: state => state.user.sexEnum,
      statusEnum: state => state.user.statusEnum,
      statusTag: state => state.user.statusTag,
      statusBtn: state => state.user.statusBtn,
      levelEnum: state => state.user.levelEnum
    })
  }
}
</script>
<style lang="scss" scoped>
.table {
  height: calc(100% - 150px);
  width: 100%;
}
.header-bg {
  background-color: #dee6ec !important;
  th {
    background-color: #dee6ec !important;
    color: #101010;
    font-weight: 400;
    font-size: 20px;
  }
}
.body-font {
  font-size: 18px;
}
.pager {
  height: 32px;
  box-sizing: content-box;
  padding: 20px 0;
  text-align: center;
}
</style>